
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
const TMapType = 'vec' | 'cva' | 'img' | 'cia' | 'ter' | 'cta' | 'ibo' | 'eva' | 'eia'
const tiandituTk = '318fc0a2f4858c90b5c1d03814048a5e'
// 添加天地图
const addTMap = (viewer, layer) => {
  const tMapImagery = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/${layer}_w/wmts?tk=${tiandituTk}`,
    layer,
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 18
  })
  viewer.imageryLayers.addImageryProvider(tMapImagery)
}

// 添加地形数据
const addWorldTerrainAsync = async (viewer) => {
  const terrain = Cesium.Terrain.fromWorldTerrain({
    requestVertexNormals: true,
    requestWaterMask: true,
  })

  viewer.scene.setTerrain(terrain);
};

//添加建筑建模
const addBuilding = async (viewer) => {
  const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(96188)
  );

  tileset.style = new Cesium.Cesium3DTileStyle({
    color: "color('#ffffff',0.5)",
    show: true
  })

  viewer.scene.primitives.add(tileset);
}

//添加gltf资产
const addGltf = async (viewer) => {
  const resource = await Cesium.IonResource.fromAssetId(2353313);
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 300),
    model: {
      uri: resource,
    },
  });
  viewer.trackedEntity = entity;
}

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmOGRiMGZiZS1hOWQ5LTQ1MzUtYWM0Mi01MWU2ZDAzYzI2NTIiLCJpZCI6MTc2Nzk4LCJpYXQiOjE2OTk0Mjc4MTN9.WW5aldQUuek518HS_rMS1TiseMYGsDGbwIPYIZk3aiQ';
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    geocoder: false,                //是否显示地名查找控件
    sceneModePicker: false,         //是否显示投影方式控件
    navigationHelpButton: false,    //是否显示帮助信息控件
    // baseLayerPicker: false,         //是否显示图层选择控件
    // homeButton: false,              //是否显示Home按钮
    fullscreenButton: false,        //是否显示全屏按钮    
    timeline: false,                 //时间轴控件 
    animation: false,                //动画控件 
  })

  //删除默认图层
  // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
  //添加天地图
  // addTMap(viewer, 'img')
  // addTMap(viewer, 'ibo')
  // viewer.scene.globe.enableLighting = true;
  // viewer.scene.globe.terrainExaggeration = 4.0;

  // 服务负载子域
  const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
  // 服务域名
  const tdtUrl = 'https://t{s}.tianditu.gov.cn/';

  //添加bing地形
  // addWorldTerrainAsync(viewer)

  // addBuilding(viewer)

  addGltf(viewer)

  viewer.scene.globe.depthTestAgainstTerrain = true;

  // 叠加地形服务
  // const terrainUrls = new Array();

  // for (let i = 0; i < subdomains.length; i++) {
  //   const url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + tiandituTk;
  //   terrainUrls.push(url);
  // }
  // const provider = new Cesium.GeoTerrainProvider({
  //   urls: terrainUrls
  // });

  // viewer.terrainProvider = provider;

  // viewer.camera.setView({
  //   destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000),
  //   orientation: {
  //     heading: 0,
  //     pitch: -120,
  //     roll: 0
  //   },
  //   complete: function callback() {
  //     // 定位完成之后的回调函数
  //   }
  // });
  

})
</script>


<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
